{% extends "layout.html" %}
{% block css %}
<style>
 .form-horizontal select.m-b{padding-top: 3px}
</style>
{% endblock %}
{% block content %}
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>课程安排 <small>安排列表</small></h5>
                        <div class="ibox-tools">
                            
                        </div>
                    </div>
                    <!--如果没有管理教师权限就去掉过滤-->
                    <div {{W(57)}} class="col-xs-5 col-md-5">
                        <a  href="{{url('/teacher/index.html')}}"><button type="button" class="btn btn-w-m btn-info"><i class="fa fa-mail-reply"></i> 教师列表</button></a>
                    </div>
                    <div {{W(75)}} class="col-xs-6 col-md-6"  >
                        <div class="input-group m-b">
                            <div class="input-group-btn">
                                <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button" aria-expanded="false">
                                   查询条件 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a data-name="" href="javascript:void(0);">模糊查询</a></li>
                                    <li><a data-name="1" href="javascript:void(0);">更多筛选</a></li>
                                </ul>
                            </div>
                            <input placeholder="教师" type="text" class="form-control" name="" value=""  id='tablesSearch'>
                            <span class="input-group-btn"><button  id="searchButton" type="button" class="btn btn-primary">搜索</button></span>
                        </div>
                    </div>
                    <div class="col-xs-12 col-md-12">
                        <!--更多筛选-->
                        <form class="form-horizontal" id="searchform" style="display:none;">
                            <div class="col-xs-5 col-md-5">
                                <div class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                       <span class="input-group-addon">选择学期 <span class="fa fa-navicon"></span></span>
                                        <select id="semester_id" class="form-control m-b" name="semester_id">
                                          <option value="">全部</option>
                                          {% if semesters|length > 0 %}
                                              {% for semester in semesters %}
                                                  <option value="{{ semester.id|e }}">{{ semester.name|e }}</option>
                                              {% endfor %}
                                          {% endif %}
                                       </select>
                                   </div>
                               </div>
                               <div class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                        <span class="input-group-addon">选择教师 <span class="fa fa-user"></span></span>
                                        <select id="teacher_id" class="form-control m-b" name="teacher_id">
                                            <option value="">全部</option>
                                            {% if teachers|length > 0 %}
                                                {% for teacher in teachers %}
                                                    <option value="{{ teacher.id|e }}"> {{ teacher.name|e }}</option>
                                                {% endfor %}
                                            {% endif %}
                                        </select>
                                   </div>
                                </div>
                                <div class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                       <span class="input-group-addon">选择科目 <span class="fa fa-calendar"></span></span>
                                        <select id="subject_id" class="form-control m-b" name="subject_id">
                                            <option value="">全部</option>
                                            {% if subjects|length > 0 %}
                                                {% for subject in subjects %}
                                                    <option value="{{ subject.id|e }}"> {{ subject.name|e }}</option>
                                                {% endfor %}
                                            {% endif %}
                                        </select>
                                   </div>
                               </div>
                                
                                <div {{W(33)}} class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                       <span class="input-group-addon">选择星期 <span class="fa fa-calendar-check-o"></span></span>
                                        <select id="week_id" class="form-control m-b" name="week_id">
                                            <option value="">全部</option>
                                            {% if weeks|length > 0 %}
                                                {% for week in weeks %}
                                                    <option value="{{ week.id|e }}"> {{ week.name|e }}</option>
                                                {% endfor %}
                                            {% endif %}
                                        </select>
                                   </div>
                               </div>
                            </div>
                            
                            <div  class="col-xs-5 col-md-5">
                                <div {{W(33)}} class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                       <span class="input-group-addon">选择教室 <span class="fa fa-flag"></span></span>
                                        <select id="room_id" class="form-control m-b" name="room_id">
                                            <option value="">选择教室</option>
                                            {{ rooms | raw }}
                                        </select>
                                   </div>
                               </div>
                               <div class="input-group col-md-10">
                                   <div class="input-group  m-b">
                                       <span class="input-group-addon">选择状态 <span class="fa fa-check-square-o"></span></span>
                                       <select class="form-control m-b" name="status">
                                           <option value="">全部</option>
                                           <option value="1">可选</option>
                                           <option value="2">下线</option>
                                       </select>
                                   </div>
                               </div>
                               <div class="input-group m-b col-md-10">
                                   <span class="input-group-addon">开始时间 <span class="fa fa-clock-o"></span></span>
                                   <input name="create_time[]" placeholder="开始日期"  class="form-control layer-date" id="start">
                               </div>
                               <div class="input-group m-b col-md-10">
                                   <span class="input-group-addon">结束时间 <span class="fa fa-clock-o"></span></span>
                                   <input name="create_time[]" placeholder="结束日期"  class="form-control layer-date" id="end">
                               </div>
                            </div>
                        </form>
                    </div>
                    
                    <div class="ibox-content">
                        <table id="dataTables" class="table table-striped table-bordered table-hover">
                           <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>学期</th>
                                    <th>教师</th>
                                    <th>科目</th>
                                    <th>学分</th>
                                    <th {{W(33)}}>星期</th>
                                    <th {{W(33)}}>时间</th>
                                    <th {{W(33)}}>教室</th>
                                    <th >状态</th>
                                    <th>添加时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>学期</th>
                                    <th>老师</th>
                                    <th>科目</th>
                                    <th>学分</th>
                                    <th {{W(33)}}>星期</th>
                                    <th {{W(33)}}>时间</th>
                                    <th {{W(33)}}>教室</th>
                                    <th>状态</th>
                                    <th>添加时间</th>
                                    <th>操作</th>
                                    <!--th {{W(75)}} >操作</th-->
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{% endblock %}

{% block script %}
    <!-- Data Tables -->
    <script src="{{url('/assets/js/plugins/dataTables/jquery.dataTables.js')}}"></script>
    <script src="{{url('/assets/js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
    <script src="{{url('/assets/js/plugins/layer/layer.min.js')}}"></script>
    
    <!-- layerDate plugin javascript -->
    <script src="{{url('/assets/js/plugins/layer/laydate/laydate.js')}}"></script>
    

    
    <script>
        $(document).ready(function () {
           
            
            // 默认加载
            dataTablesFunction();
            
            // 点击搜索
            $('#searchButton').click(function(){
                var Tables = dataTablesFunction();
            });
            
            // 下拉框选择
            $('.dropdown-menu').find('a').click(function(){
                var column = $(this).attr("data-name");
                var text = $(this).html();
                $('.dropdown-toggle').html(text+' <span class="caret"></span>');
                if(column == '1'){  // 更多条件处理
                    $('#tablesSearch').attr('disabled','disabled').val('');
                    $('#searchform').show();
                }else{
                    $('#tablesSearch').removeAttr('disabled');
                    $('#searchform').hide();
                }
            });
            
            
            //日期范围限制
            var start = {
                elem: '#start',
                format: 'YYYY-MM-DD',
                min: '2018-01-01', //设定最小日期为当前日期   laydate.now()
                max: '2099-06-16', //最大日期
                istime: false,
                istoday: false,
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };
            var end = {
                elem: '#end',
                format: 'YYYY-MM-DD',
                min: laydate.now(),
                max: '2099-06-16',
                istime: false,
                istoday: false,
                choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };
           
            laydate(start);
            laydate(end);
            
        });
        
        // 数据表格
        var dataTablesFunction = function(){
            var dataTables = $('#dataTables').dataTable({
                 serverSide: true,
                 processing: false,
                 searching: true,
                 destroy: true, //摧毁一个已经存在的Datatables，然后创建一个新的，
                 order: [[0, 'desc'],[ 1, 'desc' ]],
                 ajax: {
                    type: "POST",
                    dataType: 'json',
                    url: "{{ url('/course/getdata.html') }}",
                    data: function(data){
                        var colvalue = $('#tablesSearch').val(); 
                        if(colvalue){  // 模糊查询
                            data.teacher_name = colvalue;
                        }else{
                            data.searchdata = $('#searchform').serialize(); // 精准查询
                        }
                    },
                    complete: function (xhr, ts) {
                        // 提示处理
                        $('[data-toggle="tooltip"]').tooltip();
                        $('.dataTables_filter').hide();
                    }
                },
                columns: [
                    {"data": "id","searchable": false },
                    {"data": "semester_id"},
                    {"data": "teacher_id"},
                    {"data": "subject_name"},
                    {"data": "subject_credit"},
                    {"data": "week_id","createdCell": function (td, cellData, rowData, row, col) {
                       var tdd = "{{W(33)}}";
                       if(tdd.length > 0){
                           $(td).remove();  // 删除元素
                       }
                    }},
                    {"data": "interval_id","createdCell": function (td, cellData, rowData, row, col) {
                       var tdd = "{{W(33)}}";
                       if(tdd.length > 0){
                           $(td).remove();// 删除元素
                       }
                    }},
                    {"data": "room_id","createdCell": function (td, cellData, rowData, row, col) {
                       var tdd = "{{W(33)}}";
                       if(tdd.length > 0){
                           $(td).remove();// 删除元素
                       }
                    }},
                    {"data": "status",
                        "render": function (data, type, full, meta) {
                            if(data == 1){
                                var title = '可选';
                            }else{
                                var title = '下线'; 
                            }
                            return title;
                        }
                    },
                    {"data": "create_time","searchable": false },
                    {"data": 'action',
                        "render": function (data, type, full, meta) {
                            //console.log(full);
                            var status = full.status;
                            if(status == 1){
                                var icon = 'fa fa-times-circle';var title = '下线';
                            }else{
                                var icon = 'fa fa-check-circle'; var title = '启用';
                            }
                            var editURL = "{{url('/course/update/"+data+".html')| raw}}";
                            var button = '<a {{W(76)|raw}}  data-toggle="tooltip" data-placement="right"   title="编辑" href="'+editURL+'" ><i class="fa fa-pencil-square-o text-navy"></i> |</a>';
                            button += ' <a {{W(77)|raw}} data-toggle="tooltip" data-placement="right"  data-id="'+data+'" data-text="'+title+'" data-status="'+status+'" onClick="cancelstart(this)" title="'+title+'"  href="javascript:void(0);"><i class="'+icon+' text-navy"></i> |</a>';
                            button += ' <a {{W(78)|raw}} data-toggle="tooltip" data-placement="right" data-id="'+data+'" onClick="del(this)"  href="javascript:void(0);"><i class="glyphicon glyphicon-trash text-navy"></i> |</a>';

                            var subject_id = full.subject_id;
                            var elective = "{{url('/elective/select.html?sid="+subject_id+"')| raw}}";
                            var fraction = "{{url('/fraction/index.html?sid="+subject_id+"')| raw}}";
                            button += ' <a data-toggle="tooltip" data-placement="right"   title="成绩管理-重修成绩" href="'+fraction+'" ><i class="fa fa-pencil-square-o text-navy"></i> |</a>';
                            button += ' <a data-toggle="tooltip" data-placement="right"   title="选课管理-录入成绩" href="'+elective+'" ><i class="fa fa-line-chart text-navy"></i></a>';

                            return button;
                        //},"searchable": false,"orderable": false,"class":"{% if W(75) %}hidden{% endif %}"
                        },"searchable": false,"orderable": false

                    }
                ],
            });
            return dataTables;
        };
        
        
         // 删除操作
        var del = function(that){
            var id = $(that).attr('data-id');
            var tr = $(that).parents("tr");
            tr.addClass('text-muted');
            layer.alert('你要进行删除ID：'+id+' 的记录吗？', {
                title:'操作提示',
                icon: 3,
                closeBtn: 1
            }, function(index){
                var delUrl = "{{ url('/course/del/"+id+".html')|raw}}";
                $.get( delUrl , function(data){
                    if(data.status){
                        tr.remove(); // 删除行
                        layer.msg( data.message , {icon: 1});
                    }
                },'json');
            });
            
            $('.layui-layer-close').on( 'click', function () {
                tr.removeClass('text-muted');
            });
        };
        
        
        
       // 启用和注销操作
        var cancelstart  = function(that){

            var id = $(that).attr('data-id');
            var status = $(that).attr('data-status');
            var text = $(that).attr('data-text');
            var tr = $(that).parents("tr");
            tr.addClass('text-success');
            layer.alert('你要进行'+text+'ID：'+id+' 的记录吗？', {
                title:'操作提示',
                icon: 3,
                closeBtn: 1
            }, function(index){
                var cancelUrl = "{{ url('/course/cancelstart/"+id+"/"+status+".html')|raw}}";
                $.get( cancelUrl , function(data){
                    if(data.status){
                        layer.msg( data.message , {icon: 1});
                        dataTablesFunction();
                    }
                },'json');

            });

            $('.layui-layer-close').on( 'click', function () {
                tr.removeClass('text-success');
            });
        };
    
    
        
    </script>
{% endblock %}